<template>
  <div class="guidance-list-view-page">
    <Row>
      <Col span="24">
      <div class="view-header">
        <div class="filter-form-container">
          <Form ref="parts" :model="filterForm" inline>
            <FormItem>
              <Button @click="onAdd" icon="md-add" type="success"></Button>
            </FormItem>
            <FormItem prop="positionType">
              <Select v-model="filterForm.positionType" style="width:160px" clearable>
                    <Option
                        v-for="item in bodyParts"
                        :value="item.code"
                        :key="item.code"
                        style='text-align:center;'
                    >{{ item.name }}</Option>
                </Select>
            </FormItem>
            <FormItem prop="symptom">
              <Input type="text" v-model="filterForm.symptom" placeholder="症状" />
            </FormItem>
            <FormItem>
              <Button type="primary" @click="onFilter">查询</Button>
            </FormItem>
          </Form>
        </div>
      </div>
      </Col>
      <Col span="24">
      <Table stripe :columns="tableColumns" :data="tableData"></Table>
      <div class="page-container">
        <Page :total="count" :current="pageNo" :page-size="pageSize" show-total show-elevator @on-change="onPage" />
      </div>
      </Col>
    </Row>

    <!-- 删除确认弹窗 -->
    <Modal v-model="showDelModal" title="确认删除弹窗" class="drugmanagement-commondrug-list-delModal">
      <p>删除后不可恢复，确认删除所选项吗？</p>
      <div slot="footer">
        <Button class="cancel-btn btn" @click="showDelModal = false">
          <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>取消
        </Button>
        <Button class="save-btn btn" type="primary" icon="ios-checkmark" :loading="delLoading" @click="handleDel">确认</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import api from "@/api/commonApi";
export default {
  data() {
    const that = this;

    return {
      showDelModal: false,
      selectId: 0,
      bodyParts:[],
      crowds:[{"code":"0","name":"所有"},{"code":"1","name":"男"},{"code":"2","name":"女"}],
      filterForm: {
        positionType: '',
        symptom: ''
      },
      tableColumns: [
        {
            title: "排序",
            key: "iSum",
            align: "center",
            render: (h, params) => {
                let iSum = (this.pageNo-1)*this.pageSize + params.index +1;
                return h("span", iSum);
            }
        },
        { title: '症状名称', key: 'symptom', align: 'center' },
        { title: '症状部位', key: 'postionType', align: 'center',render: this.findTypeName },
        { title: '适用人群', key: 'gender', align: 'center',render: this.findGenderName},
        { title: '症状描述', key: 'synopsis', align: 'center' },
        { title: '推荐就诊科室', key: 'deptNames', align: 'center' },
        { title: '操作', key: 'operate', align: 'center', 
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.edit(params.row);
                    }
                  }
                },
                "编辑"
              ),
              h(
                "Button",
                
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.delete(params.row);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      tableData: [],
      count: 10,
      pageNo: 1,
      pageSize: 10
    };
  },
  created() {
	
  },
  mounted() {
    this.getBodyParts();
    this.getTableData();
  },
  methods: {
    getBodyParts() {
        this.$axios.post(api.queryBodyParts, {}).then(res => {
            if (res.data.code) {
                let ret = res.data.object;
                if(ret){
                    this.bodyParts = ret;
                }
            } 
        }).catch(() => {
			    console.log('身体部位获取失败');
        });
    },
    findTypeName(h, params) {
        let record = params.row;
        let typeName = "";
        //找到名字
        this.bodyParts.forEach(element => {
          if(element.code == record.postionType){
              typeName = element.name;
            }
        });
        return [
            h("span", typeName)
        ]
    },
    findGenderName(h, params) {
        let record = params.row;
        let typeName = "";
        //找到名字
        this.crowds.forEach(element => {
          if(element.code == record.gender){
              typeName = element.name;
            }
        });
        return [
            h("span", typeName)
        ]
    },
    // 添加新内容
    onAdd() {
        let query = this.filterForm;
        query.pageNo = this.pageNo;

        this.functionJS.queryNavgationTo(
            this,
            "/index/publicOperation/guidance/add",
            //公用方法
            query
        );
    },
    onFilter(){
      this.pageNo = 1
      this.getTableData()
    },
    onPage(pageNo){
      this.pageNo = pageNo;
      this.getTableData();
    },
    //根据ID修改对应的新闻资讯
    edit(item) {
        let id = item.id;
        this.functionJS.queryNavgationTo(
            this,
            "/index/publicOperation/guidance/edit",
            {
                //公用方法
                id,
                pageNo: this.pageNo,
                positionType: this.positionType,
            }
        );
    },
    // 删除
    delete(item) {
      this.selectId = item.id;
      this.showDelModal = true;
    },
    // 手动删除
    handleDel() {
      this.delLoading = true;
      this.$axios
          .delete(api.prefixSymptom+this.selectId)
          .then(res => {
              this.delLoading = false;
              if (res.data.code) {
                  this.getTableData();
                  this.$Message.info("操作成功");
              } else {
                this.$Message.info("操作失败,请重试");
              }
              this.showDelModal = false;
          }).catch(error=>{
            this.delLoading = false;
          });
    },
    // 加载table数据
    getTableData() {
      this.$axios
        .post(api.querySymptomPage, {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          ...this.filterForm
        })
        .then(resp => {
          if (resp.data.success) {
            let ret = resp.data.object.records;
            if (ret) {
              this.count = resp.data.object.total;
              this.tableData = ret;
            } else {
              this.tableData = []
              this.count = 0
            }
          } else {
            this.$Message.error("请求失败,请稍候重试");
          }
        });
    }
  }
};
</script>
<style lang="less" scoped>
.guidance-list-view-page{
  padding: 10px;
  box-sizing: border-box;
  background-color: #fff;
}
.view-header{
  position: relative;

  z-index: 0;
  .filter-form-container{
    padding: 20px 0 0 0;
  }
}
.page-container{
  padding: 10px;
  text-align: center;
}
</style>
